<template lang="html">
  <div class="mendian">
    <div class="map_head">
      <i class="el-icon-arrow-left" @click="back()"></i>
      <div>凯撒门店</div>
      <div @click="change()" class="tomap">
          <i class="el-icon-location"></i>
      </div>
    </div>
    <el-input class="input_head"
      placeholder="搜索门店"
      v-model="input">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <sgNav></sgNav>
    <Store></Store>

  </div>
</template>

<script>
import Store from '../components/store'
import Vue from 'vue'
import sgNav from '../components/nav'
// import { Button } from 'element-ui'
// import { Input } from 'element-ui'
// import { Select } from 'element-ui'
// import { Option } from 'element-ui'
//
//
// Vue.prototype.$ELEMENT = { size: 'small' }
// Vue.use(Button)
// Vue.use(Input)
// Vue.use(Select)
// Vue.use(Option)
export default {
  data(){
    return {
      input:'',
      cities: [{
         value: 'Beijing',
         label: '北京'
       }, {
         value: 'Shanghai',
         label: '上海'
       }, {
         value: 'Nanjing',
         label: '南京'
       }, {
         value: 'Chengdu',
         label: '成都'
       }, {
         value: 'Shenzhen',
         label: '深圳'
       }, {
         value: 'Guangzhou',
         label: '广州'
       }],
       value6: '',
       result:[]
    }
  },
  components:{
    Store,
    sgNav

  },
  methods:{
    back(){
      history.back();
    },
    change(){
      this.$router.push({
        path:'/map'
      })
    }
  }

}
</script>

<style lang="css">

.mendian{

  /*width: 100%;*/
}
.map_head{
  height: 3rem;
  background-color: #00b0ec;
  color: white;
  display: flex;
  padding: 0 4%;
  justify-content: space-between;
  align-items: center;
}
.input_head{
  width: 95%;
}
.wrap_option{

  display: flex;
  justify-content: space-around;
}
#option_1{
  border:none;
  outline: none;
}
</style>
